<!DOCTYPE html>
<html>
<head>
    <title>SPC记录表</title>
    #parse("sys/header.html")
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="true">
        <Row :gutter="16">
            <div class="search-group">
                <i-col span="3">
                    <i-input v-model="q.name" @on-enter="query" placeholder="用户编号"/>
                </i-col>
                <i-col span="3">
                    <i-input v-model="q.start" @on-enter="query" placeholder="开始时间"/>
                </i-col>
                <i-col span="3">
                    <i-input v-model="q.end" @on-enter="query" placeholder="结束时间"/>
                </i-col>
                <i-col span="3">
                    <i-select v-model="q.type" placeholder="游戏类型">
                        <i-option value="1">幸运转盘</i-option>
                        <i-option value="3">刮刮乐</i-option>
                        <i-option value="5">壹周乐</i-option>
                        <i-option value="4">健康打卡</i-option>
                    </i-select>
                </i-col>
                <i-col span="3">
                    <i-input v-model="model.input" @on-enter="query" placeholder="游戏收入" readonly/>
                </i-col>
                <i-col span="3">
                    <i-input v-model="model.output" @on-enter="query" placeholder="游戏支出" readonly/>
                </i-col>
                <i-button @click="query">查询</i-button>
            </div>
        </Row>
    </div>
</div>

<script type="text/javascript">
    let vm = new Vue({
        el: '#rrapp',
        data: {
            q: {
                name: '',
                start:'',
                end:''

            },
            model:{
                input:'',
                output:''
            }
        },
        methods: {
            query:function () {
                Ajax.request({
                    url: "../energyspc/queryGameDetails",
                    params: JSON.stringify(vm.q),
                    type: "POST",
                    contentType: "application/json",
                    successCallback: function (r) {
                       vm.model.input = r.model.totalSpend;
                       vm.model.output = r.model.totalPrice;
                    }
                });
            }
        }
    });
</script>
</body>
</html>